<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <style>
        p{display: inline-block;width: 80px;text-align: right;}
        form{width: 700px;margin: 80px auto;background: darkgray;}
        div{padding: 15px;}
        input{margin-left: 10px;}
        button{padding: 15px;}
        span{padding: 5px;}
        .high{color: red;}
        .onError{ color: red;}
        .onSuccess{color: green;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <form id="userForm">
        <div>
            <p>用户名:</p>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
            <span></span>
        </div>
        <div align="center">
            <button id="sent">立即注册</button>
        </div>
    </form>

    <script>

        //为必填文本框追加提示符号*
        $("form span").each(function () {
            var $required = "<strong class='high'>*</strong>";
            $(this).append($required);
        })

        //给input框添加blur事件
        $("form :input").blur(function () {
            //1.验证用户名
            if($(this).is("#username")){
                var $parent = $(this).parent();
                $parent.find(".msg").remove();
                //console.log($parent);
                var username = $("#username").val();
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(username.length < 4 || regName.test(username)){
                    var errorMsg = "用户名不少于4位，不能用特殊字符";
                    $parent.append("<span class='msg onError'>"+ errorMsg +"</span>");
                }else {
                    var okMsg = "输入正确";
                    $parent.append("<span class='msg onSuccess'>"+ okMsg +"</span>")
                }
            }
        })
        //提交表单
        $("#sent").click(function () {
            //点击提交验证表单文本框的值
            $("form :input").trigger("blur"); //trigger("blur")方法触发被选元素的指定事件类型。
            var arrorLength = $(".error").length;
            if (arrorLength){
                alert("表单信息有问题,不能提交");
                return false;
            }
            // var username = $("#username").val();
            // user ={
            //     username:username,
            // };
            $("#userInfo").submit(function () {
                alert("表单信息完整！");
                $.ajax({
                    url:'http://localhost:8080/user/addName',
                    type:'post',
                    date:{date:user},
                    success:function (date) {
                        if(date == 200){
                            alert("成功")
                        }
                    }
                })
            });
            //return false;
        })

    </script>

<!--
逻辑：

    1. 验证表单数据
    1. a、提交表单空值验证，数据为空阻止提交表单//b、input文本框数据有误阻止提交


-->
</body>
</html>